<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }

      div {
        box-sizing: border-box;
      }

      .plan {
        position: relative;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div
        ref="planRef"
        class="plan"
        :style="planStyles"
        @mousedown="handleMousedown"
        @mousemove="handleMousemove"
        @mouseup="handleMouseup"
      ></div>
    </div>

    <script type="module">
      import {
        createApp,
        ref,
      } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

      const app = createApp({
        setup() {
          const PLAN_WIDTH = 1920 / 1.8
          const PLAN_HEIGHT = 1080 / 1.8
          const ONE_VW = PLAN_WIDTH / 100
          const ONE_VH = PLAN_HEIGHT / 100
          const PLAN_MARGIN_TOP = 100
          const PLAN_URL =
            'https://oss.huarendjk.com/img/2024-09-03/66d6c2fed3aa5.png'
          const planStyles = {
            width: PLAN_WIDTH + 'px',
            height: PLAN_HEIGHT + 'px',
            margin: `${PLAN_MARGIN_TOP}px auto 0`,
            backgroundImage: `url(${PLAN_URL})`,
            backgroundSize: `${PLAN_WIDTH}px ${PLAN_HEIGHT}px`,
          }
          const planRef = ref(null)

          let choiceBoxDom = null
          let choiceBoxInfo = { left: 0, top: 0, width: 0, height: 0 }
          let isDown = false
          const startPositions = { x: 0, y: 0 }
          const endPositions = { x: 0, y: 0 }

          function handleMousedown(e) {
            isDown = true
            startPositions.x = e.pageX - planRef.value.offsetLeft
            startPositions.y = e.pageY - planRef.value.offsetTop
            console.log('start', startPositions)
          }

          function handleMousemove(e) {
            if (!isDown) return
            endPositions.x = e.pageX - planRef.value.offsetLeft
            endPositions.y = e.pageY - planRef.value.offsetTop
            drawChoiceBox()
          }

          function handleMouseup(e) {
            isDown = false
            let data = getSizeAndPositionInfo()
            console.log('data', data);
          }

          function createChoiceBox() {
            clearChoiceBox()
            const box = document.createElement('div')
            const id = 'choice-box'
            box.id = id
            box.style.position = 'absolute'
            box.style.border = '1px dashed #fff'
            planRef.value.appendChild(box)
            const boxNode = document.getElementById(id)
            return boxNode
          }

          function drawChoiceBox() {
            if (choiceBoxDom === null) {
              choiceBoxDom = createChoiceBox()
            }
            let xDiff = endPositions.x - startPositions.x
            let yDiff = endPositions.y - startPositions.y
            choiceBoxInfo.left = xDiff > 0 ? startPositions.x : endPositions.x
            choiceBoxInfo.top = yDiff > 0 ? startPositions.y : endPositions.y
            choiceBoxInfo.width = Math.abs(xDiff)
            choiceBoxInfo.height = Math.abs(yDiff)
            choiceBoxDom.style.left = choiceBoxInfo.left + 'px'
            choiceBoxDom.style.top = choiceBoxInfo.top + 'px'
            choiceBoxDom.style.width = choiceBoxInfo.width + 'px'
            choiceBoxDom.style.height = choiceBoxInfo.height + 'px'
          }

          function getSizeAndPositionInfo() {
            let x = choiceBoxInfo.left / ONE_VW
            let y = choiceBoxInfo.top / ONE_VH
            let width = choiceBoxInfo.width / ONE_VW
            let height = choiceBoxInfo.height / ONE_VH
            return { x, y, width, height }
          }

          function clearChoiceBox() {
            if (planRef.value.firstChild) {
              planRef.value.removeChild(planRef.value.firstChild)
              choiceBoxDom === null
            }
          }

          return {
            planStyles,
            planRef,
            handleMousedown,
            handleMousemove,
            handleMouseup,
          }
        },
      })
      app.mount('#app')
    </script>
  </body>
</html>
